<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#333">
    <title>Material Style</title>
    <meta name="description" content="Material Style Theme">
    <link rel="shortcut icon" href="assets/img/favicon-v=3.png">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="assets/css/preload.min.css">
    <link rel="stylesheet" href="assets/css/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.light-blue-500.min.css">
    <link rel="stylesheet" href="assets/css/width-boxed.min.css" id="ms-boxed" disabled="">
    <!--[if lt IE 9]>
        <script src="assets/js/html5shiv.min.js"></script>
        <script src="assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <a href="javascript:void(0)" class="ms-conf-btn ms-configurator-btn btn-circle btn-circle-raised btn-circle-primary animated rubberBand">
      <i class="fa fa-gears"></i>
    </a>
    <div id="ms-configurator" class="ms-configurator">
      <div class="ms-configurator-title">
        <h3>
          <i class="fa fa-gear"></i> Theme Configurator</h3>
        <a href="javascript:void(0);" class="ms-conf-btn withripple">
          <i class="zmdi zmdi-close"></i>
        </a>
      </div>
      <div class="panel-group" id="accordion_conf" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="ms-conf-header-color">
            <h4 class="panel-title">
              <a role="button" class="withripple" data-toggle="collapse" data-parent="#accordion_conf" href="#ms-collapse-conf-1" aria-expanded="true" aria-controls="ms-collapse-conf-1">
                <i class="zmdi zmdi-invert-colors"></i> Color Selector </a>
            </h4>
          </div>
          <div id="ms-collapse-conf-1" class="card-collapse collapse show" role="tabpanel" aria-labelledby="ms-conf-header-color">
            <div class="panel-body">
              <div id="color-options" class="ms-colors-container">
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary red" data-color="red">red</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary pink" data-color="pink">pink</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary purple" data-color="purple">purple</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary deep-purple" data-color="deep-purple">deep-purple</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary indigo" data-color="indigo">indigo</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary blue" data-color="blue">blue</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary light-blue active" data-color="light-blue">light-blue</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary cyan" data-color="cyan">cyan</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary teal" data-color="teal">teal</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary green" data-color="green">green</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary light-green" data-color="light-green">light-green</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary lime" data-color="lime">lime</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary yellow" data-color="yellow">yellow</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary amber" data-color="amber">amber</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary orange" data-color="orange">orange</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary deep-orange" data-color="deep-orange">deep-orange</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary brown" data-color="brown">brown</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary grey" data-color="grey">grey</a>
                <a href="javascript:void(0);" class="ms-color-box ms-color-box-primary blue-grey" data-color="blue-grey">blue-grey</a>
              </div>
              <div id="grad-options" class="ms-color-shine">
                <h4 class="no-mb text-center">Color Brightness</h4>
                <span>300</span>
                <span>400</span>
                <span>500</span>
                <span>600</span>
                <span>700</span>
                <span>800</span>
                <a href="javascript:void(0)" data-shine=300 class="ms-color-box grad c300 light-blue">300</a>
                <a href="javascript:void(0)" data-shine=400 class="ms-color-box grad c400 light-blue">400</a>
                <a href="javascript:void(0)" data-shine=500 class="ms-color-box grad c500 light-blue active">500</a>
                <a href="javascript:void(0)" data-shine=600 class="ms-color-box grad c600 light-blue">600</a>
                <a href="javascript:void(0)" data-shine=700 class="ms-color-box grad c700 light-blue">700</a>
                <a href="javascript:void(0)" data-shine=800 class="ms-color-box grad c800 light-blue">800</a>
              </div>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="ms-conf-header-headers">
            <h4 class="panel-title">
              <a class="collapsed withripple" role="button" data-toggle="collapse" data-parent="#accordion_conf" href="#ms-collapse-conf-2" aria-expanded="false" aria-controls="ms-collapse-conf-2">
                <i class="zmdi zmdi-view-compact"></i> Header Styles </a>
            </h4>
          </div>
          <div id="ms-collapse-conf-2" class="card-collapse collapse" role="tabpanel" aria-labelledby="ms-conf-header-headers">
            <div class="panel-body">
              <!--<h5>Preset Options</h5>
                    <form class="form-inverse ms-conf-radio">
                        <div class="form-group">
                            <div class="radio radio-primary">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">Default Style
                                </label>
                            </div>
                            <div class="radio radio-primary">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Pure Material
                                </label>
                            </div>
                            <div class="radio radio-primary">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">Navbar Mode
                                </label>
                            </div>
                        </div>
                    </form>
                    <h5>Custom Header</h5>-->
              <h6>Header Options</h6>
              <form class="form-inverse ms-conf-radio" id="header-config">
                <div class="form-group">
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customHeader" id="whiteHeader" value="white" checked="cheked"> Light Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customHeader" id="primaryHeader" value="primary"> Primary Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customHeader" id="darkHeader" value="dark"> Dark Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customHeader" id="noHeader" value="hidden"> No Header (Navbar Mode) </label>
                  </div>
                </div>
              </form>
              <h6>Navbar Options</h6>
              <form class="form-inverse ms-conf-radio" id="navbar-config">
                <div class="form-group">
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customNavbar" id="whiteNavbar" value="white" checked=""> Light Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customNavbar" id="primaryNavbar" value="primary"> Primary Color </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customNavbar" id="darkNavbar" value="dark"> Dark Color </label>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="ms-conf-header-container">
            <h4 class="panel-title">
              <a class="collapsed withripple" role="button" data-toggle="collapse" data-parent="#accordion_conf" href="#ms-conf-collapse-3" aria-expanded="false" aria-controls="ms-conf-collapse-3">
                <i class="zmdi zmdi-grid"></i> Container Options </a>
            </h4>
          </div>
          <div id="ms-conf-collapse-3" class="card-collapse collapse" role="tabpanel" aria-labelledby="ms-conf-header-container">
            <div class="panel-body">
              <form class="form-inverse ms-conf-radio" id="boxed-config">
                <div class="form-group">
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customWidth" id="fullWidth" value="full" checked=""> Full Width </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="customWidth" id="boxedWidth" value="boxed"> Boxed Mode </label>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="ms-preload" class="ms-preload">
      <div id="status">
        <div class="spinner">
          <div class="dot1"></div>
          <div class="dot2"></div>
        </div>
      </div>
    </div>
    <div class="ms-site-container">
      <!-- Modal -->
      <div class="modal modal-primary" id="ms-account-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog animated zoomIn animated-3x" role="document">
          <div class="modal-content">
            <div class="modal-header d-block shadow-2dp no-pb">
              <button type="button" class="close d-inline pull-right mt-2" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">
                  <i class="zmdi zmdi-close"></i>
                </span>
              </button>
              <div class="modal-title text-center">
                <span class="ms-logo ms-logo-white ms-logo-sm mr-1">M</span>
                <h3 class="no-m ms-site-title">Material
                  <span>Style</span>
                </h3>
              </div>
              <div class="modal-header-tabs">
                <ul class="nav nav-tabs nav-tabs-full nav-tabs-3 nav-tabs-primary" role="tablist">
                  <li class="nav-item" role="presentation">
                    <a href="#ms-login-tab" aria-controls="ms-login-tab" role="tab" data-toggle="tab" class="nav-link active withoutripple">
                      <i class="zmdi zmdi-account"></i> Login</a>
                  </li>
                  <li class="nav-item" role="presentation">
                    <a href="#ms-register-tab" aria-controls="ms-register-tab" role="tab" data-toggle="tab" class="nav-link withoutripple">
                      <i class="zmdi zmdi-account-add"></i> Register</a>
                  </li>
                  <li class="nav-item" role="presentation">
                    <a href="#ms-recovery-tab" aria-controls="ms-recovery-tab" role="tab" data-toggle="tab" class="nav-link withoutripple">
                      <i class="zmdi zmdi-key"></i> Recovery Pass</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="modal-body">
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade active show" id="ms-login-tab">
                  <form autocomplete="off">
                    <fieldset>
                      <div class="form-group label-floating">
                        <div class="input-group">
                          <span class="input-group-addon">
                            <i class="zmdi zmdi-account"></i>
                          </span>
                          <label class="control-label" for="ms-form-user">Username</label>
                          <input type="text" id="ms-form-user" class="form-control"> </div>
                      </div>
                      <div class="form-group label-floating">
                        <div class="input-group">
                          <span class="input-group-addon">
                            <i class="zmdi zmdi-lock"></i>
                          </span>
                          <label class="control-label" for="ms-form-pass">Password</label>
                          <input type="password" id="ms-form-pass" class="form-control"> </div>
                      </div>
                      <div class="row mt-2">
                        <div class="col-md-6">
                          <div class="form-group no-mt">
                            <div class="checkbox">
                              <label>
                                <input type="checkbox"> Remember Me </label>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <button class="btn btn-raised btn-primary pull-right">Login</button>
                        </div>
                      </div>
                    </fieldset>
                  </form>
                  <div class="text-center">
                    <h3>Login with</h3>
                    <a href="javascript:void(0)" class="wave-effect-light btn btn-raised btn-facebook">
                      <i class="zmdi zmdi-facebook"></i> Facebook</a>
                    <a href="javascript:void(0)" class="wave-effect-light btn btn-raised btn-twitter">
                      <i class="zmdi zmdi-twitter"></i> Twitter</a>
                    <a href="javascript:void(0)" class="wave-effect-light btn btn-raised btn-google">
                      <i class="zmdi zmdi-google"></i> Google</a>
                  </div>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="ms-register-tab">
                  <form>
                    <fieldset>
                      <div class="form-group label-floating">
                        <div class="input-group">
                          <span class="input-group-addon">
                            <i class="zmdi zmdi-account"></i>
                          </span>
                          <label class="control-label" for="ms-form-user-new">Username</label>
                          <input type="text" id="ms-form-user-new" class="form-control"> </div>
                      </div>
                      <div class="form-group label-floating">
                        <div class="input-group">
                          <span class="input-group-addon">
                            <i class="zmdi zmdi-email"></i>
                          </span>
                          <label class="control-label" for="ms-form-email-new">Email</label>
                          <input type="email" id="ms-form-email-new" class="form-control"> </div>
                      </div>
                      <div class="form-group label-floating">
                        <div class="input-group">
                          <span class="input-group-addon">
                            <i class="zmdi zmdi-lock"></i>
                          </span>
                          <label class="control-label" for="ms-form-pass-new">Password</label>
                          <input type="password" id="ms-form-pass-new" class="form-control"> </div>
                      </div>
                      <div class="form-group label-floating">
                        <div class="input-group">
                          <span class="input-group-addon">
                            <i class="zmdi zmdi-lock"></i>
                          </span>
                          <label class="control-label" for="ms-form-pass-re-new">Re-type Password</label>
                          <input type="password" id="ms-form-pass-re-new" class="form-control"> </div>
                      </div>
                      <button class="btn btn-raised btn-block btn-primary">Register Now</button>
                    </fieldset>
                  </form>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="ms-recovery-tab">
                  <fieldset>
                    <div class="form-group label-floating">
                      <div class="input-group">
                        <span class="input-group-addon">
                          <i class="zmdi zmdi-account"></i>
                        </span>
                        <label class="control-label" for="ms-form-user-re">Username</label>
                        <input type="text" id="ms-form-user-re" class="form-control"> </div>
                    </div>
                    <div class="form-group label-floating">
                      <div class="input-group">
                        <span class="input-group-addon">
                          <i class="zmdi zmdi-email"></i>
                        </span>
                        <label class="control-label" for="ms-form-email-re">Email</label>
                        <input type="email" id="ms-form-email-re" class="form-control"> </div>
                    </div>
                    <button class="btn btn-raised btn-block btn-primary">Send Password</button>
                  </fieldset>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <header class="ms-header ms-header-primary">
        <!--ms-header-primary-->
        <div class="container container-full">
          <div class="ms-title">
            <a href="index.html">
              <!-- <img src="assets/img/demo/logo-header.png" alt=""> -->
              <span class="ms-logo animated zoomInDown animation-delay-5">M</span>
              <h1 class="animated fadeInRight animation-delay-6">Material
                <span>Style</span>
              </h1>
            </a>
          </div>
          <div class="header-right">
            <div class="share-menu">
              <ul class="share-menu-list">
                <li class="animated fadeInRight animation-delay-3">
                  <a href="javascript:void(0)" class="btn-circle btn-google">
                    <i class="zmdi zmdi-google"></i>
                  </a>
                </li>
                <li class="animated fadeInRight animation-delay-2">
                  <a href="javascript:void(0)" class="btn-circle btn-facebook">
                    <i class="zmdi zmdi-facebook"></i>
                  </a>
                </li>
                <li class="animated fadeInRight animation-delay-1">
                  <a href="javascript:void(0)" class="btn-circle btn-twitter">
                    <i class="zmdi zmdi-twitter"></i>
                  </a>
                </li>
              </ul>
              <a href="javascript:void(0)" class="btn-circle btn-circle-primary animated zoomInDown animation-delay-7">
                <i class="zmdi zmdi-share"></i>
              </a>
            </div>
            <a href="javascript:void(0)" class="btn-circle btn-circle-primary no-focus animated zoomInDown animation-delay-8" data-toggle="modal" data-target="#ms-account-modal">
              <i class="zmdi zmdi-account"></i>
            </a>
            <form class="search-form animated zoomInDown animation-delay-9">
              <input id="search-box" type="text" class="search-input" placeholder="Search..." name="q" />
              <label for="search-box">
                <i class="zmdi zmdi-search"></i>
              </label>
            </form>
            <a href="javascript:void(0)" class="btn-ms-menu btn-circle btn-circle-primary ms-toggle-left animated zoomInDown animation-delay-10">
              <i class="zmdi zmdi-menu"></i>
            </a>
          </div>
        </div>
      </header>
      <nav class="navbar navbar-expand-md  navbar-static ms-navbar ms-navbar-primary">
        <div class="container container-full">
          <div class="navbar-header">
            <a class="navbar-brand" href="index.html">
              <!-- <img src="assets/img/demo/logo-navbar.png" alt=""> -->
              <span class="ms-logo ms-logo-sm">M</span>
              <span class="ms-title">Material
                <strong>Style</strong>
              </span>
            </a>
          </div>
          <div class="collapse navbar-collapse" id="ms-navbar">
            <ul class="navbar-nav">
              <li class="nav-item dropdown active">
                <a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-7" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="home">Home
                  <i class="zmdi zmdi-chevron-down"></i>
                </a>
                <ul class="dropdown-menu">
                  <li class="ms-tab-menu">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs ms-tab-menu-left" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link active" href="#tab-general" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-home"></i> General Purpose</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-landing" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-desktop-windows"></i> Landing pages</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-revolution" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-panorama-horizontal"></i> Slider Revolution</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-shop" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-store"></i> Shop</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-profile" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-account"></i> Professional Profile</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-blog" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-edit"></i> Blog Template</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-magazine" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-flip"></i> Magazine Template</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-app" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-smartphone-iphone"></i> App Pages</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#tab-ads" data-hover="tab" data-toggle="tab" role="tab">
                          <i class="zmdi zmdi-search"></i> Classified Ads</a>
                      </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content ms-tab-menu-right">
                      <div class="tab-pane active" id="tab-general" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="index.html">Default Home</a>
                          </li>
                          <li>
                            <a href="home-generic-2.html">Home Black Slider</a>
                          </li>
                          <li>
                            <a href="home-generic-3.html">Home Browsers Intro</a>
                          </li>
                          <li>
                            <a href="home-generic-4.html">Home Mobile Intro</a>
                          </li>
                          <li>
                            <a href="home-generic-5.html">Home Material Icons</a>
                          </li>
                          <li>
                            <a href="home-generic-6.html">Home Typed Hero</a>
                          </li>
                          <li>
                            <a href="home-generic-7.html">Home Typed Hero 2</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-landing" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-landing.html">Home Landing Intro</a>
                          </li>
                          <li>
                            <a href="home-landing2.html">Home Landing Intro 2</a>
                          </li>
                          <li>
                            <a href="home-landing4.html">Home Landing Intro 3</a>
                          </li>
                          <li>
                            <a href="home-landing3.html">Home Landing Video</a>
                          </li>
                          <li>
                            <a href="home-cv3.html">Home Profile Landing 1</a>
                          </li>
                          <li>
                            <a href="home-cv4.html">Home Profile Landing 2</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Landing Video 2 (Next Update)</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-revolution" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a class="with-badge" href="home-revolution.html">Home Revolution Devices
                              <span class="badge badge-success pull-right">1.3</span>
                            </a>
                          </li>
                          <li>
                            <a class="with-badge" href="home-revolution2.html">Home Revolution App
                              <span class="badge badge-success pull-right">1.3</span>
                            </a>
                          </li>
                          <li>
                            <a class="with-badge" href="home-revolution3.html">Home Revolution Video
                              <span class="badge badge-success pull-right">1.3</span>
                            </a>
                          </li>
                          <li>
                            <a class="with-badge" href="home-revolution4.html">Home Revolution Idea
                              <span class="badge badge-success pull-right">1.3</span>
                            </a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-shop" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-shop.html">Home Shop 1</a>
                          </li>
                          <li>
                            <a href="home-shop2.html">Home Shop 2</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Home Shop 3 (Next Update)</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Home Shop 4 (Next Update)</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-profile" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-cv.html">Home Profile 1</a>
                          </li>
                          <li>
                            <a href="home-cv2.html">Home Profile 2</a>
                          </li>
                          <li>
                            <a href="home-cv3.html">Home Profile Landing 1</a>
                          </li>
                          <li>
                            <a href="home-cv4.html">Home Profile Landing 2</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-blog" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-blog.html">Home Blog 1</a>
                          </li>
                          <li>
                            <a href="home-blog2.html">Home Blog 2</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Home Blog 3 (Next Update)</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Home Blog 4 (Next Update)</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-magazine" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-magazine.html">Home Magazine 1</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Magazine 2 (Next Update)</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Magazine 3 (Next Update)</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Magazine 4 (Next Update)</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-app" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-app.html">Home App 1</a>
                          </li>
                          <li>
                            <a href="home-app2.html">Home App 2</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Home App 3 (Next Update)</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Home App 4 (Next Update)</a>
                          </li>
                        </ul>
                      </div>
                      <div class="tab-pane" id="tab-ads" role="tabpanel">
                        <ul class="ms-tab-menu-right-container">
                          <li>
                            <a href="home-class.html">Home Classifieds 1</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Classifieds 2 (Next Update)</a>
                          </li>
                          <li class="disable">
                            <a href="javascript:void(0)">Classifieds 3 (Next Update)</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-7" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="page">Pages
                  <i class="zmdi zmdi-chevron-down"></i>
                </a>
                <ul class="dropdown-menu">
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="dropdown-item has_children">About us &amp; Team</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-about.html">About us Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-about2.html">About us Option 2</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-about3.html">About us Option 3</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-about4.html">About us Option 4</a>
                      </li>
                      <li class="dropdown-divider"></li>
                      <li>
                        <a class="dropdown-item" href="page-team.html">Our Team Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-team2.html">Our Team Option 2</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Form</a>
                    <ul class="dropdown-menu">
                      <li>
                        <a class="dropdown-item" href="page-contact.html">Contact Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-contact2.html">Contact Option 2</a>
                      </li>
                      <li class="dropdown-divider"></li>
                      <li>
                        <a class="dropdown-item" href="page-login_register.html">Login &amp; Register</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-login.html">Login Full</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-login2.html">Login Integrated</a>
                      </li>
                      <li class="dropdown-divider"></li>
                      <li>
                        <a class="dropdown-item" href="page-login_register2.html">Register Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-register2.html">Register Option 2</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Profiles</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-profile.html">User Profile Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-profile2.html">User Profile Option 2</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Error</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-404.html">Error 404 Full Page</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-404_2.html">Error 404 Integrated</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-500.html">Error 500 Full Page</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-500_2.html">Error 500 Integrated</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Bussiness &amp; Products</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-testimonial.html">Testimonials</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-clients.html">Our Clients</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-product.html">Products</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-services.html">Services</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Pricing</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-pricing.html">Pricing Box</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-pricing2.html">Pricing Box 2</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-princing_table.html">Pricing Mega Table</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">FAQ &amp; Support</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-support.html">Support Center</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-faq.html">FAQ Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-faq2.html">FAQ Option 2</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Coming Soon</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-coming.html">Coming Soon Option 1</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-coming2.html">Coming Soon Option 2</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-coming3.html">Coming Soon Option 3</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Timeline</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item" href="page-timeline_left.html">Timeline Left</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-timeline_left2.html">Timeline Left 2</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="page-timeline.html">Timeline Center</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu">
                    <a href="javascript:void(0)" class="has_children dropdown-item">Email Templates</a>
                    <ul class="dropdown-menu dropdown-menu-left">
                      <li>
                        <a class="dropdown-item with-badge" href="page-email.html">Email Template 1
                          <span class="badge badge-success text-right">1.2</span>
                        </a>
                        </a>
                      </li>
                      <li>
                        <a class="dropdown-item with-badge" href="page-email2.html">Email Template 2
                          <span class="badge badge-success text-right">1.2</span>
                        </a>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a class="dropdown-item" href="page-all.html" class="dropdown-link">All Pages</a>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown dropdown-megamenu-container">
                <a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-7" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="component">UI Elements
                  <i class="zmdi zmdi-chevron-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-megamenu animated fadeIn animated-2x">
                  <li class="container">
                    <div class="row">
                      <div class="col-sm-3 megamenu-col">
                        <div class="megamenu-block animated fadeInLeft animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="fa fa-bold"></i> Bootstrap CSS</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-typography.html">
                                <i class="fa fa-font"></i> Typography</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-headers.html">
                                <i class="fa fa-header"></i> Headers</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-dividers.html">
                                <i class="fa fa-arrows-h"></i> Dividers</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-blockquotes.html">
                                <i class="fa fa-quote-right"></i> Blockquotes</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-forms.html">
                                <i class="fa fa-check-square-o"></i> Forms
                                <span class="badge badge-info pull-right">
                                  <i class="zmdi zmdi-long-arrow-up no-mr"></i> 1.5</span>
                              </a>
                            </li>
                            <li>
                              <a class="withripple" href="component-tables.html">
                                <i class="fa fa-table"></i> Tables</a>
                            </li>
                          </ul>
                        </div>
                        <div class="megamenu-block animated fadeInLeft animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="fa fa-hand-o-up"></i> Buttons</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-basic-buttons.html">
                                <i class="fa fa-arrow-circle-right"></i> Basic Buttons</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-buttons-components.html">
                                <i class="fa fa-arrow-circle-right"></i> Buttons Components</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-social-buttons.html">
                                <i class="fa fa-arrow-circle-right"></i> Social Buttons
                                <span class="badge badge-info pull-right">
                                  <i class="zmdi zmdi-long-arrow-up no-mr"></i> 1.3</span>
                              </a>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div class="col-sm-3 megamenu-col">
                        <div class="megamenu-block animated fadeInLeft animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="fa fa-list-alt"></i> Basic Components</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-panels.html">
                                <i class="zmdi zmdi-view-agenda"></i> Panels</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-alerts.html">
                                <i class="zmdi zmdi-info"></i> Alerts &amp; Wells</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-badges.html">
                                <i class="zmdi zmdi-tag"></i> Badges &amp; Badges Pills</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-lists.html">
                                <i class="zmdi zmdi-view-list"></i> Lists</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-thumbnails.html">
                                <i class="zmdi zmdi-image-o"></i> Thumbnails</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-carousels.html">
                                <i class="zmdi zmdi-view-carousel"></i> Carousels</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-modals.html">
                                <i class="zmdi zmdi-window-maximize"></i> Modals</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-tooltip.html">
                                <i class="zmdi zmdi-pin-help"></i> Tooltip &amp; Popover</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-progress-bars.html">
                                <i class="zmdi zmdi-view-headline"></i> Progress Bars</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-pagination.html">
                                <i class="zmdi zmdi-n-2-square"></i> Pagination</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-dropdowns.html">
                                <i class="fa fa-info"></i> Dropdowns</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div class="col-sm-3 megamenu-col">
                        <div class="megamenu-block animated fadeInRight animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="zmdi zmdi-folder-star-alt"></i> Extra Components</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-cards.html">
                                <i class="zmdi zmdi-card-membership"></i> Cards</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-composite-cards.html">
                                <i class="zmdi zmdi-card-giftcard"></i> Composite Cards</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-counters.html">
                                <i class="zmdi zmdi-n-6-square"></i> Counters</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-audio-video.html">
                                <i class="zmdi zmdi-play-circle"></i> Audio &amp; Video</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-masonry.html">
                                <i class="zmdi zmdi-view-dashboard"></i> Masonry Layer</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-snackbar.html">
                                <i class="zmdi zmdi-notifications-active"></i> SnackBar
                                <span class="badge badge-success pull-right">1.2</span>
                              </a>
                            </li>
                            <li>
                              <a class="withripple" href="component-lightbox.html">
                                <i class="zmdi zmdi-collection-image-o"></i> Lightbox
                                <span class="badge badge-success pull-right">1.5</span>
                              </a>
                            </li>
                          </ul>
                        </div>
                        <div class="megamenu-block animated fadeInRight animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="zmdi zmdi-tab"></i> Collapses &amp; Tabs</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-collapses.html">
                                <i class="zmdi zmdi-view-day"></i> Collapses</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-horizontal-tabs.html">
                                <i class="zmdi zmdi-tab"></i> Horitzontal Tabs</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-vertical-tabs.html">
                                <i class="zmdi zmdi-menu"></i> Vertical Tabs</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div class="col-sm-3 megamenu-col">
                        <div class="megamenu-block animated fadeInRight animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="fa fa-briefcase"></i> Icons</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-icons-basic.html">
                                <i class="fa fa-arrow-circle-right"></i> Basic Icons</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-icons-fontawesome.html">
                                <i class="fa fa-arrow-circle-right"></i> Font Awesome</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-icons-iconic.html">
                                <i class="fa fa-arrow-circle-right"></i> Material Design Iconic</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-icons-glyphicons.html">
                                <i class="fa fa-arrow-circle-right"></i> Glyphicons</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-icons-ionicons.html">
                                <i class="fa fa-arrow-circle-right"></i> Ionicons
                                <span class="badge badge-success pull-right">2.0</span>
                              </a>
                            </li>
                          </ul>
                        </div>
                        <div class="megamenu-block animated fadeInRight animated-2x">
                          <h3 class="megamenu-block-title">
                            <i class="fa fa-area-chart"></i> Charts</h3>
                          <ul class="megamenu-block-list">
                            <li>
                              <a class="withripple" href="component-charts-circle.html">
                                <i class="zmdi zmdi-chart-donut"></i> Circle Charts</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-charts-bar.html">
                                <i class="fa fa-bar-chart"></i> Bars Charts</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-charts-line.html">
                                <i class="fa fa-line-chart"></i> Line Charts</a>
                            </li>
                            <li>
                              <a class="withripple" href="component-charts-more.html">
                                <i class="fa fa-pie-chart"></i> More Charts</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-7" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="blog">Blog
                  <i class="zmdi zmdi-chevron-down"></i>
                </a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="blog-sidebar.html">
                      <i class="zmdi zmdi-view-compact"></i> Blog Sidebar 1</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="blog-sidebar2.html">
                      <i class="zmdi zmdi-view-compact"></i> Blog Sidebar 2</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="blog-masonry.html">
                      <i class="zmdi zmdi-view-dashboard"></i> Blog Masonry 1</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="blog-masonry2.html">
                      <i class="zmdi zmdi-view-dashboard"></i> Blog Masonry 2</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="blog-full.html">
                      <i class="zmdi zmdi zmdi-view-stream"></i> Blog Full Page 1</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="blog-full2.html">
                      <i class="zmdi zmdi zmdi-view-stream"></i> Blog Full Page 2</a>
                  </li>
                  <li class="dropdown-divider"></li>
                  <li>
                    <a class="dropdown-item" href="blog-post.html">
                      <i class="zmdi zmdi-file-text"></i> Blog Post 1</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="blog-post2.html">
                      <i class="zmdi zmdi-file-text"></i> Blog Post 2</a>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-8" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="portfolio">Portfolio
                  <i class="zmdi zmdi-chevron-down"></i>
                </a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="portfolio-filters_sidebar.html">
                      <i class="zmdi zmdi-view-compact"></i> Portfolio Sidebar Filters</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="portfolio-filters_topbar.html">
                      <i class="zmdi zmdi-view-agenda"></i> Portfolio Topbar Filters</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="portfolio-filters_sidebar_fluid.html">
                      <i class="zmdi zmdi-view-compact"></i> Portfolio Sidebar Fluid</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="portfolio-filters_topbar_fluid.html">
                      <i class="zmdi zmdi-view-agenda"></i> Portfolio Topbar Fluid</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="portfolio-cards.html">
                      <i class="zmdi zmdi-card-membership"></i> Porfolio Cards</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="portfolio-masonry.html">
                      <i class="zmdi zmdi-view-dashboard"></i> Porfolio Masonry</a>
                  </li>
                  <li>
                    <a class="dropdown-item with-badge" href="portfolio-gallery.html">
                      <i class="zmdi zmdi-apps"></i> Picture Gallery
                      <span class="badge badge-success text-right">1.5</span>
                    </a>
                  </li>
                  <li class="dropdown-divider"></li>
                  <li>
                    <a class="dropdown-item" href="portfolio-item.html">
                      <i class="zmdi zmdi-collection-item-1"></i> Portfolio Item 1</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="portfolio-item2.html">
                      <i class="zmdi zmdi-collection-item-2"></i> Portfolio Item 2</a>
                  </li>
                </ul>
              </li>
              <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-9" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="ecommerce">E-Commerce
                  <i class="zmdi zmdi-chevron-down"></i>
                </a>
                <ul class="dropdown-menu">
                  <li>
                    <a class="dropdown-item" href="ecommerce-filters.html">E-Commerce Sidebar</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="ecommerce-filters-full.html">E-Commerce Sidebar Full</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="ecommerce-filters-full2.html">E-Commerce Topbar Full</a>
                  </li>
                  <li class="dropdown-divider"></li>
                  <li>
                    <a class="dropdown-item" href="ecommerce-item.html">E-Commerce Item</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="ecommerce-cart.html">E-Commerce Cart</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <a href="javascript:void(0)" class="ms-toggle-left btn-navbar-menu">
            <i class="zmdi zmdi-menu"></i>
          </a>
        </div>
        <!-- container -->
      </nav>
      <div class="material-background"></div>
      <div class="container container-full">
        <div class="ms-paper">
          <div class="row">
            <div class="col-lg-3 ms-paper-menu-left-container">
              <div class="ms-paper-menu-left">
                <h3 class="ms-paper-menu-title">
                  <i class="zmdi zmdi-apps"></i> Components Menu
                  <a role="button" data-toggle="collapse" href="#collapseMenu" aria-expanded="false" aria-controls="collapseMenu" class="withripple">
                    <i class="zmdi zmdi-menu"></i>
                  </a>
                </h3>
                <div class="panel-menu collapse" id="collapseMenu">
                  <ul class="panel-group ms-collapse-nav" id="components-nav" role="tablist" aria-multiselectable="true">
                    <li class="card" role="tab" id="e1">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c1" aria-expanded="true" aria-controls="c1" class="collapsed withripple">
                        <i class="fa fa-bold"></i> Bootstrap CSS</a>
                      <ul id="c1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="e1">
                        <li>
                          <a class="withripple" href="component-typography.html">
                            <i class="fa fa-font"></i> Typography</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-headers.html">
                            <i class="fa fa-header"></i> Headers</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-dividers.html">
                            <i class="fa fa-arrows-h"></i> Dividers</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-blockquotes.html">
                            <i class="fa fa-quote-right"></i> Blockquotes</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-forms.html">
                            <i class="fa fa-check-square-o"></i> Forms</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-tables.html">
                            <i class="fa fa-table"></i> Tables</a>
                        </li>
                      </ul>
                    </li>
                    <li class="card" role="tab" id="e2">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c2" aria-expanded="true" aria-controls="c2" class="withripple">
                        <i class="fa fa-hand-o-up"></i> Buttons</a>
                      <ul id="c2" class="panel-collapse collapse show" role="tabpanel" aria-labelledby="e2">
                        <li>
                          <a class="withripple active" href="component-basic-buttons.html">
                            <i class="fa fa-arrow-circle-right"></i> Basic Buttons</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-buttons-components.html">
                            <i class="fa fa-arrow-circle-right"></i> Buttons Components</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-social-buttons.html">
                            <i class="fa fa-arrow-circle-right"></i> Social Buttons</a>
                        </li>
                      </ul>
                    </li>
                    <li class="card" role="tab" id="e3">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c3" aria-expanded="true" aria-controls="c3" class="collapsed withripple">
                        <i class="fa fa-briefcase"></i> Icons</a>
                      <ul id="c3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="e3">
                        <li>
                          <a class="withripple" href="component-icons-basic.html">
                            <i class="fa fa-arrow-circle-right"></i> Basic Icons</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-icons-fontawesome.html">
                            <i class="fa fa-arrow-circle-right"></i> Font Awesome</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-icons-iconic.html">
                            <i class="fa fa-arrow-circle-right"></i> Material Design Iconic</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-icons-glyphicons.html">
                            <i class="fa fa-arrow-circle-right"></i> Glyphicons</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-icons-ionicons.html">
                            <i class="fa fa-arrow-circle-right"></i> Ionicons</a>
                        </li>
                      </ul>
                    </li>
                    <li class="card" role="tab" id="e4">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c4" aria-expanded="true" aria-controls="c4" class="collapsed withripple">
                        <i class="fa fa-list-alt"></i> Basic Components</a>
                      <ul id="c4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="e4">
                        <li>
                          <a class="withripple" href="component-panels.html">
                            <i class="zmdi zmdi-view-agenda"></i> Panels</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-alerts.html">
                            <i class="zmdi zmdi-info"></i> Alerts &amp; Wells</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-badges.html">
                            <i class="zmdi zmdi-tag"></i> Badges &amp; Badges Pills</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-lists.html">
                            <i class="zmdi zmdi-view-list"></i> Lists</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-thumbnails.html">
                            <i class="zmdi zmdi-image-o"></i> Thumbnails</a>
                          </a>
                        </li>
                        <li>
                          <a class="withripple" href="component-carousels.html">
                            <i class="zmdi zmdi-view-carousel"></i> Carousels</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-modals.html">
                            <i class="zmdi zmdi-window-maximize"></i> Modals</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-tooltip.html">
                            <i class="zmdi zmdi-pin-help"></i> Tooltip &amp; Popover</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-progress-bars.html">
                            <i class="zmdi zmdi-view-headline"></i> Progress Bars</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-pagination.html">
                            <i class="zmdi zmdi-n-2-square"></i> Pagination</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-dropdowns.html">
                            <i class="fa fa-info"></i> Dropdowns</a>
                        </li>
                      </ul>
                    </li>
                    <li class="card" role="tab" id="e5">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c5" aria-expanded="true" aria-controls="c5" class="collapsed withripple">
                        <i class="zmdi zmdi-folder-star-alt"></i> Extra Components</a>
                      <ul id="c5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="e5">
                        <li>
                          <a class="withripple" href="component-cards.html">
                            <i class="zmdi zmdi-card-membership"></i> Cards</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-composite-cards.html">
                            <i class="zmdi zmdi-card-giftcard"></i> Composite Cards</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-counters.html">
                            <i class="zmdi zmdi-n-6-square"></i> Counters</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-audio-video.html">
                            <i class="zmdi zmdi-play-circle"></i> Audio &amp; Video</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-masonry.html">
                            <i class="zmdi zmdi-apps"></i> Masonry Layer</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-snackbar.html">
                            <i class="zmdi zmdi-notifications-active"></i> SnackBar</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-lightbox.html">
                            <i class="zmdi zmdi-collection-image-o"></i> Lightbox</a>
                        </li>
                      </ul>
                    </li>
                    <li class="card" role="tab" id="e6">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c6" aria-expanded="true" aria-controls="c6" class="collapsed withripple">
                        <i class="zmdi zmdi-tab"></i> Collapses &amp; Tabs</a>
                      <ul id="c6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="e6">
                        <li>
                          <a class="withripple" href="component-collapses.html">
                            <i class="zmdi zmdi-view-day"></i> Collapses</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-horizontal-tabs.html">
                            <i class="zmdi zmdi-tab"></i> Horitzontal Tabs</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-vertical-tabs.html">
                            <i class="zmdi zmdi-menu"></i> Vertical Tabs</a>
                        </li>
                      </ul>
                    </li>
                    <li class="card" role="tab" id="e7">
                      <a role="button" data-toggle="collapse" data-parent="#components-nav" href="#c7" aria-expanded="true" aria-controls="c7" class="collapsed withripple">
                        <i class="fa fa-area-chart"></i> Charts</a>
                      <ul id="c7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="e7">
                        <li>
                          <a class="withripple" href="component-charts-circle.html">
                            <i class<i class="zmdi zmdi-chart-donut"></i> Circle Charts</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-charts-bar.html">
                            <i class="fa fa-bar-chart"></i> Bars Charts</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-charts-line.html">
                            <i class="fa fa-line-chart"></i> Line Charts</a>
                        </li>
                        <li>
                          <a class="withripple" href="component-charts-more.html">
                            <i class="fa fa-pie-chart"></i> More Charts</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                  <!-- ms-collapse-nav -->
                </div>
              </div>
            </div>
            <!-- col-lg-3 -->
            <div class="col-lg-9 ms-paper-content-container">
              <div class="ms-paper-content">
                <h1>Buttons</h1>
                <section class="ms-component-section">
                  <div class="row text-center">
                    <div class="col-md-6">
                      <h2 class="section-title">Basic Buttons</h2>
                      <a href="javascript:void(0)" class="btn btn-default">Button</a>
                      <a href="javascript:void(0)" class="btn btn-primary">Button</a>
                      <a href="javascript:void(0)" class="btn btn-info">Button</a>
                      <a href="javascript:void(0)" class="btn btn-success">Button</a>
                      <a href="javascript:void(0)" class="btn btn-warning">Button</a>
                      <a href="javascript:void(0)" class="btn btn-danger">Button</a>
                      <a href="javascript:void(0)" class="btn btn-royal">Button</a>
                    </div>
                    <div class="col-md-6">
                      <h2 class="section-title">Raised Buttons</h2>
                      <a href="javascript:void(0)" class="btn btn-raised btn-default">Button</a>
                      <a href="javascript:void(0)" class="btn btn-raised btn-primary">Button</a>
                      <a href="javascript:void(0)" class="btn btn-raised btn-info">Button</a>
                      <a href="javascript:void(0)" class="btn btn-raised btn-success">Button</a>
                      <a href="javascript:void(0)" class="btn btn-raised btn-warning">Button</a>
                      <a href="javascript:void(0)" class="btn btn-raised btn-danger">Button</a>
                      <a href="javascript:void(0)" class="btn btn-raised btn-royal">Button</a>
                    </div>
                  </div>
                  <br>
                  <div class="card card-info card-code">
                    <div class="card-header card-code-header" role="tab" id="codeHead1">
                      <h4 class="panel-title card-code-title">
                        <a class="collapsed withripple" role="button" data-toggle="collapse" href="#code1" aria-expanded="false" aria-controls="code1">
                          <i class="zmdi zmdi-code"></i> Show Code </a>
                      </h4>
                    </div>
                    <div id="code1" class="card-collapse collapse" role="tabpanel" aria-labelledby="codeHead1">
                      <div class="card-code-block"> <pre><code class="language-markup line-numbers">&lt;a href=&quot;#&quot; class=&quot;btn btn-default&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-info&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-success&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-warning&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-danger&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-royal&quot;&gt;Button&lt;/a&gt;

&lt;a href=&quot;#&quot; class=&quot;btn btn-raised btn-default&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-raised btn-primary&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-raised btn-info&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-raised btn-success&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-raised btn-warning&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-raised btn-danger&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-raised btn-royal&quot;&gt;Button&lt;/a&gt;</code></pre> </div>
                    </div>
                  </div>
                  <!-- card-code -->
                </section>
                <section class="ms-component-section">
                  <h2 class="section-title">Block Buttons</h2>
                  <div class="row">
                    <div class="col-md-6">
                      <h3>Basic Buttons</h3>
                      <a href="javascript:void(0)" class="btn btn-block btn-default">Button</a>
                      <a href="javascript:void(0)" class="btn btn-block btn-primary">Button</a>
                      <a href="javascript:void(0)" class="btn btn-block btn-info">Button</a>
                      <a href="javascript:void(0)" class="btn btn-block btn-success">Button</a>
                      <a href="javascript:void(0)" class="btn btn-block btn-warning">Button</a>
                      <a href="javascript:void(0)" class="btn btn-block btn-danger">Button</a>
                      <a href="javascript:void(0)" class="btn btn-block btn-royal">Button</a>
                    </div>
                    <div class="col-md-6">
                      <h3>Raised Buttons</h3>
                      <a href="javascript:void(0)" class="btn btn-block btn-raised btn-default">Button</a>
                      <a href="javascript:void(0)" class="btn btn-block btn-raised btn-primary">Button</a>
                      <a href="javascript:void(0)" class="btn btn-block btn-raised btn-info">Button</a>
                      <a href="javascript:void(0)" class="btn btn-block btn-raised btn-success">Button</a>
                      <a href="javascript:void(0)" class="btn btn-block btn-raised btn-warning">Button</a>
                      <a href="javascript:void(0)" class="btn btn-block btn-raised btn-danger">Button</a>
                      <a href="javascript:void(0)" class="btn btn-block btn-raised btn-royal">Button</a>
                    </div>
                  </div>
                  <hr class="dashed">
                  <h3>Full Width Example</h3>
                  <a href="javascript:void(0)" class="btn btn-block btn-primary">Button</a>
                  <a href="javascript:void(0)" class="btn btn-block btn-raised btn-primary">Button</a>
                  <br>
                  <div class="card card-info card-code">
                    <div class="card-header card-code-header" role="tab" id="codeHead2">
                      <h4 class="panel-title card-code-title">
                        <a class="collapsed withripple" role="button" data-toggle="collapse" href="#code2" aria-expanded="false" aria-controls="code2">
                          <i class="zmdi zmdi-code"></i> Show Code </a>
                      </h4>
                    </div>
                    <div id="code2" class="card-collapse collapse" role="tabpanel" aria-labelledby="codeHead2">
                      <div class="card-code-block"> <pre><code class="language-markup line-numbers">&lt;a href=&quot;#&quot; class=&quot;btn btn-block btn-primary&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-block btn-raised btn-primary&quot;&gt;Button&lt;/a&gt;</code></pre> </div>
                    </div>
                  </div>
                  <!-- card-code -->
                </section>
                <section class="ms-component-section">
                  <div class="wrap-inverse">
                    <div class="text-center">
                      <h2 class="section-title">Inverse Buttons</h2>
                      <h3>White Buttons</h3>
                      <a href="javascript:void(0)" class="btn btn-white">Button</a>
                      <a href="javascript:void(0)" class="btn btn-raised color-primary btn-white">Button</a>
                      <br>
                      <h3>Other Colors</h3>
                      <a href="javascript:void(0)" class="btn btn-raised btn-white">Button</a>
                      <a href="javascript:void(0)" class="btn btn-raised color-info btn-white">Button</a>
                      <a href="javascript:void(0)" class="btn btn-raised color-success btn-white">Button</a>
                      <a href="javascript:void(0)" class="btn btn-raised color-warning btn-white">Button</a>
                      <a href="javascript:void(0)" class="btn btn-raised color-danger btn-white">Button</a>
                      <a href="javascript:void(0)" class="btn btn-raised color-royal btn-white">Button</a>
                      <h3>Raised Buttons</h3>
                      <a href="javascript:void(0)" class="btn btn-raised btn-default">Button</a>
                      <a href="javascript:void(0)" class="btn btn-raised btn-info">Button</a>
                      <a href="javascript:void(0)" class="btn btn-raised btn-success">Button</a>
                      <a href="javascript:void(0)" class="btn btn-raised btn-warning">Button</a>
                      <a href="javascript:void(0)" class="btn btn-raised btn-danger">Button</a>
                      <a href="javascript:void(0)" class="btn btn-raised btn-royal">Button</a>
                    </div>
                    <br>
                    <div class="card card-warning card-code">
                      <div class="card-header card-code-header" role="tab" id="codeHead4">
                        <h4 class="panel-title card-code-title">
                          <a class="collapsed withripple" role="button" data-toggle="collapse" href="#code4" aria-expanded="false" aria-controls="code4">
                            <i class="zmdi zmdi-code"></i> Show Code </a>
                        </h4>
                      </div>
                      <div id="code4" class="card-collapse collapse" role="tabpanel" aria-labelledby="codeHead3">
                        <div class="card-code-block"> <pre><code class="language-markup line-numbers">&lt;a href=&quot;#&quot; class=&quot;btn btn-white&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-raised color-primary btn-white&quot;&gt;Button&lt;/a&gt;

&lt;a href=&quot;#&quot; class=&quot;btn btn-raised btn-white&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-raised color-info btn-white&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-raised color-success btn-white&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-raised color-warning btn-white&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-raised color-danger btn-white&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-raised color-royal btn-white&quot;&gt;Button&lt;/a&gt;

&lt;a href=&quot;#&quot; class=&quot;btn btn-raised btn-default&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-raised btn-info&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-raised btn-success&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-raised btn-warning&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-raised btn-danger&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-raised btn-royal&quot;&gt;Button&lt;/a&gt;</code></pre> </div>
                      </div>
                    </div>
                    <!-- card-code -->
                  </div>
                  <!-- wrap-inverse -->
                </section>
                <section class="ms-component-section">
                  <h2 class="section-title">Size Buttons</h2>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="text-center">
                        <h3>Basic Buttons</h3>
                        <a href="javascript:void(0)" class="btn btn-xs btn-default">Button</a>
                        <br>
                        <a href="javascript:void(0)" class="btn btn-sm btn-default">Button</a>
                        <br>
                        <a href="javascript:void(0)" class="btn btn-primary">Button</a>
                        <br>
                        <a href="javascript:void(0)" class="btn btn-lg btn-info">Button</a>
                        <br>
                        <a href="javascript:void(0)" class="btn btn-xlg btn-info">Button</a>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="text-center">
                        <h3>Raised Buttons</h3>
                        <a href="javascript:void(0)" class="btn btn-raised btn-xs btn-default">Button</a>
                        <br>
                        <a href="javascript:void(0)" class="btn btn-raised btn-sm btn-default">Button</a>
                        <br>
                        <a href="javascript:void(0)" class="btn btn-raised btn-primary">Button</a>
                        <br>
                        <a href="javascript:void(0)" class="btn btn-raised btn-lg btn-info">Button</a>
                        <br>
                        <a href="javascript:void(0)" class="btn btn-raised btn-xlg btn-info">Button</a>
                      </div>
                    </div>
                  </div>
                  <hr class="dashed">
                  <h3>Block Buttons Example</h3>
                  <a href="javascript:void(0)" class="btn btn-block btn-sm btn-raised btn-primary">Button</a>
                  <a href="javascript:void(0)" class="btn btn-block btn-raised btn-primary">Button</a>
                  <a href="javascript:void(0)" class="btn btn-block btn-lg btn-raised btn-primary">Button</a>
                  <a href="javascript:void(0)" class="btn btn-block btn-xlg btn-raised btn-primary">Button</a>
                  <br>
                  <div class="card card-info card-code">
                    <div class="card-header card-code-header" role="tab" id="codeHead3">
                      <h4 class="panel-title card-code-title">
                        <a class="collapsed withripple" role="button" data-toggle="collapse" href="#code3" aria-expanded="false" aria-controls="code3">
                          <i class="zmdi zmdi-code"></i> Show Code </a>
                      </h4>
                    </div>
                    <div id="code3" class="card-collapse collapse" role="tabpanel" aria-labelledby="codeHead3">
                      <div class="card-code-block"> <pre><code class="language-markup line-numbers">&lt;a href=&quot;#&quot; class=&quot;btn btn-xs btn-default&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-sm btn-default&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-info&quot;&gt;Button&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-xlg btn-info&quot;&gt;Button&lt;/a&gt;</code></pre> </div>
                    </div>
                  </div>
                  <!-- card-code -->
                </section>
                <section class="ms-component-section">
                  <h2 class="section-title">Circle Buttons</h2>
                  <div class="row">
                    <div class="col-md-6">
                      <h3>Normal Buttons</h3>
                      <h4>Font Awesome Icons</h4>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-default">
                        <i class="fa fa-search"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-primary">
                        <i class="fa fa-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-info">
                        <i class="fa fa-phone"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-success">
                        <i class="fa fa-send"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-warning">
                        <i class="fa fa-heart"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-danger">
                        <i class="fa fa-globe"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-royal">
                        <i class="fa fa-star"></i>
                      </a>
                      <br>
                      <h4>Material Design Iconic Font</h4>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-default">
                        <i class="zmdi zmdi-search"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-primary">
                        <i class="zmdi zmdi-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-info">
                        <i class="zmdi zmdi-phone"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-success">
                        <i class="zmdi zmdi-mail-send"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-warning">
                        <i class="zmdi zmdi-favorite"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-danger">
                        <i class="zmdi zmdi-globe"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-royal">
                        <i class="zmdi zmdi-star"></i>
                      </a>
                    </div>
                    <div class="col-md-6">
                      <h3>Raised Buttons</h3>
                      <h4>Font Awesome Icons</h4>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-default">
                        <i class="fa fa-search"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-primary">
                        <i class="fa fa-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-info">
                        <i class="fa fa-phone"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-success">
                        <i class="fa fa-send"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-warning">
                        <i class="fa fa-heart"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-danger">
                        <i class="fa fa-globe"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-royal">
                        <i class="fa fa-star"></i>
                      </a>
                      <br>
                      <h4>Material Design Iconic Font</h4>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-default">
                        <i class="zmdi zmdi-search"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-primary">
                        <i class="zmdi zmdi-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-info">
                        <i class="zmdi zmdi-phone"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-success">
                        <i class="zmdi zmdi-mail-send"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-warning">
                        <i class="zmdi zmdi-favorite"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-danger">
                        <i class="zmdi zmdi-globe"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-royal">
                        <i class="zmdi zmdi-star"></i>
                      </a>
                    </div>
                  </div>
                </section>
                <section class="ms-component-section">
                  <div class="wrap-inverse">
                    <div class="text-center">
                      <h2 class="section-title">Inverse Circle Buttons</h2>
                      <h3>White Buttons</h3>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-white">
                        <i class="fa fa-search"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-white btn-circle-primary">
                        <i class="fa fa-search"></i>
                      </a>
                      <h3>Other Colors</h3>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-white btn-circle-default">
                        <i class="zmdi zmdi-search"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-white btn-circle-info">
                        <i class="zmdi zmdi-phone"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-white btn-circle-success">
                        <i class="zmdi zmdi-mail-send"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-white btn-circle-warning">
                        <i class="zmdi zmdi-favorite"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-white btn-circle-danger">
                        <i class="zmdi zmdi-globe"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-white btn-circle-royal">
                        <i class="zmdi zmdi-star"></i>
                      </a>
                      <h3>Raised Buttons</h3>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-default">
                        <i class="zmdi zmdi-search"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-info">
                        <i class="zmdi zmdi-phone"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-success">
                        <i class="zmdi zmdi-mail-send"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-warning">
                        <i class="zmdi zmdi-favorite"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-danger">
                        <i class="zmdi zmdi-globe"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-royal">
                        <i class="zmdi zmdi-star"></i>
                      </a>
                    </div>
                    <br>
                    <div class="card card-warning card-code">
                      <div class="card-header card-code-header" role="tab" id="codeHead5">
                        <h4 class="panel-title card-code-title">
                          <a class="collapsed withripple" role="button" data-toggle="collapse" href="#code5" aria-expanded="false" aria-controls="code5">
                            <i class="zmdi zmdi-code"></i> Show Code </a>
                        </h4>
                      </div>
                      <div id="code5" class="card-collapse collapse" role="tabpanel" aria-labelledby="codeHead5">
                        <div class="card-code-block"> <pre><code class="language-markup line-numbers">&lt;h2 class=&quot;section-title&quot;&gt;Inverse Circle Buttons&lt;/h2&gt;
&lt;h3&gt;White Buttons&lt;/h3&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-white&quot;&gt;&lt;i class=&quot;fa fa-search&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-white btn-circle-primary&quot;&gt;&lt;i class=&quot;fa fa-search&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;h3&gt;Other Colors&lt;/h3&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-white btn-circle-default&quot;&gt;&lt;i class=&quot;zmdi zmdi-search&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-white btn-circle-info&quot;&gt;&lt;i class=&quot;zmdi zmdi-phone&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-white btn-circle-success&quot;&gt;&lt;i class=&quot;zmdi zmdi-mail-send&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-white btn-circle-warning&quot;&gt;&lt;i class=&quot;zmdi zmdi-favorite&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-white btn-circle-danger&quot;&gt;&lt;i class=&quot;zmdi zmdi-globe&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-white btn-circle-royal&quot;&gt;&lt;i class=&quot;zmdi zmdi-star&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;h3&gt;Raised Buttons&lt;/h3&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-default&quot;&gt;&lt;i class=&quot;zmdi zmdi-search&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-info&quot;&gt;&lt;i class=&quot;zmdi zmdi-phone&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-success&quot;&gt;&lt;i class=&quot;zmdi zmdi-mail-send&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-warning&quot;&gt;&lt;i class=&quot;zmdi zmdi-favorite&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-danger&quot;&gt;&lt;i class=&quot;zmdi zmdi-globe&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-royal&quot;&gt;&lt;i class=&quot;zmdi zmdi-star&quot;&gt;&lt;/i&gt;&lt;/a&gt;
</code></pre> </div>
                      </div>
                    </div>
                    <!-- card-code -->
                  </div>
                </section>
                <section class="ms-component-section">
                  <h2 class="section-title">Size Circle Buttons</h2>
                  <div class="row">
                    <div class="col-md-6">
                      <h3>Normal Buttons</h3>
                      <h4>Font Awesome Icons</h4>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-xlg btn-circle-primary">
                        <i class="fa fa-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-lg btn-circle-primary">
                        <i class="fa fa-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-primary">
                        <i class="fa fa-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-sm btn-circle-primary">
                        <i class="fa fa-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-xs btn-circle-primary">
                        <i class="fa fa-download"></i>
                      </a>
                      <br>
                      <h4>Material Design Iconic Font</h4>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-xlg btn-circle-primary">
                        <i class="zmdi zmdi-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-lg btn-circle-primary">
                        <i class="zmdi zmdi-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-primary">
                        <i class="zmdi zmdi-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-sm btn-circle-primary">
                        <i class="zmdi zmdi-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-xs btn-circle-primary">
                        <i class="zmdi zmdi-download"></i>
                      </a>
                    </div>
                    <div class="col-md-6">
                      <h3>Raised Buttons</h3>
                      <h4>Font Awesome Icons</h4>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-xlg btn-circle-raised btn-circle-primary">
                        <i class="fa fa-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-lg btn-circle-raised btn-circle-primary">
                        <i class="fa fa-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-primary">
                        <i class="fa fa-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-sm btn-circle-raised btn-circle-primary">
                        <i class="fa fa-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-xs btn-circle-raised btn-circle-primary">
                        <i class="fa fa-download"></i>
                      </a>
                      <br>
                      <h4>Material Design Iconic Font</h4>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-xlg btn-circle-raised btn-circle-primary">
                        <i class="zmdi zmdi-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-lg btn-circle-raised btn-circle-primary">
                        <i class="zmdi zmdi-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-circle-primary">
                        <i class="zmdi zmdi-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-sm btn-circle-raised btn-circle-primary">
                        <i class="zmdi zmdi-download"></i>
                      </a>
                      <a href="javascript:void(0)" class="btn-circle btn-circle-xs btn-circle-raised btn-circle-primary">
                        <i class="zmdi zmdi-download"></i>
                      </a>
                    </div>
                  </div>
                  <br>
                  <div class="card card-info card-code">
                    <div class="card-header card-code-header" role="tab" id="codeHead6">
                      <h4 class="panel-title card-code-title">
                        <a class="collapsed withripple" role="button" data-toggle="collapse" href="#code6" aria-expanded="false" aria-controls="code6">
                          <i class="zmdi zmdi-code"></i> Show Code </a>
                      </h4>
                    </div>
                    <div id="code6" class="card-collapse collapse" role="tabpanel" aria-labelledby="codeHead6">
                      <div class="card-code-block"> <pre><code class="language-markup line-numbers">&lt;h2 class=&quot;section-title&quot;&gt;Circle Buttons&lt;/h2&gt;

&lt;h3&gt;Normal Buttons&lt;/h3&gt;

&lt;h4&gt;Font Awesome Icons&lt;/h4&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-default&quot;&gt;&lt;i class=&quot;fa fa-search&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-primary&quot;&gt;&lt;i class=&quot;fa fa-download&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-info&quot;&gt;&lt;i class=&quot;fa fa-phone&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-success&quot;&gt;&lt;i class=&quot;fa fa-send&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-warning&quot;&gt;&lt;i class=&quot;fa fa-heart&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-danger&quot;&gt;&lt;i class=&quot;fa fa-globe&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-royal&quot;&gt;&lt;i class=&quot;fa fa-star&quot;&gt;&lt;/i&gt;&lt;/a&gt;

&lt;h4&gt;Material Design Iconic Font&lt;/h4&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-default&quot;&gt;&lt;i class=&quot;zmdi zmdi-search&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-primary&quot;&gt;&lt;i class=&quot;zmdi zmdi-download&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-info&quot;&gt;&lt;i class=&quot;zmdi zmdi-phone&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-success&quot;&gt;&lt;i class=&quot;zmdi zmdi-mail-send&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-warning&quot;&gt;&lt;i class=&quot;zmdi zmdi-favorite&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-danger&quot;&gt;&lt;i class=&quot;zmdi zmdi-globe&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-royal&quot;&gt;&lt;i class=&quot;zmdi zmdi-star&quot;&gt;&lt;/i&gt;&lt;/a&gt;

&lt;h3&gt;Raised Buttons&lt;/h3&gt;

&lt;h4&gt;Font Awesome Icons&lt;/h4&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-default&quot;&gt;&lt;i class=&quot;fa fa-search&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-primary&quot;&gt;&lt;i class=&quot;fa fa-download&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-info&quot;&gt;&lt;i class=&quot;fa fa-phone&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-success&quot;&gt;&lt;i class=&quot;fa fa-send&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-warning&quot;&gt;&lt;i class=&quot;fa fa-heart&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-danger&quot;&gt;&lt;i class=&quot;fa fa-globe&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-royal&quot;&gt;&lt;i class=&quot;fa fa-star&quot;&gt;&lt;/i&gt;&lt;/a&gt;

&lt;h4&gt;Material Design Iconic Font&lt;/h4&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-default&quot;&gt;&lt;i class=&quot;zmdi zmdi-search&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-primary&quot;&gt;&lt;i class=&quot;zmdi zmdi-download&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-info&quot;&gt;&lt;i class=&quot;zmdi zmdi-phone&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-success&quot;&gt;&lt;i class=&quot;zmdi zmdi-mail-send&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-warning&quot;&gt;&lt;i class=&quot;zmdi zmdi-favorite&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-danger&quot;&gt;&lt;i class=&quot;zmdi zmdi-globe&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn-circle btn-circle-raised btn-circle-royal&quot;&gt;&lt;i class=&quot;zmdi zmdi-star&quot;&gt;&lt;/i&gt;&lt;/a&gt;</code></pre> </div>
                    </div>
                  </div>
                  <!-- card-code -->
                </section>
              </div>
              <!-- ms-paper-content -->
            </div>
            <!-- col-lg-9 -->
          </div>
          <!-- row -->
        </div>
        <!-- ms-paper -->
      </div>
      <!-- container -->
      <aside class="ms-footbar">
        <div class="container">
          <div class="row">
            <div class="col-lg-4 ms-footer-col">
              <div class="ms-footbar-block">
                <h3 class="ms-footbar-title">Sitemap</h3>
                <ul class="list-unstyled ms-icon-list three_cols">
                  <li>
                    <a href="index.html">
                      <i class="zmdi zmdi-home"></i> Home</a>
                  </li>
                  <li>
                    <a href="page-blog.html">
                      <i class="zmdi zmdi-edit"></i> Blog</a>
                  </li>
                  <li>
                    <a href="page-blog.html">
                      <i class="zmdi zmdi-image-o"></i> Portafolio</a>
                  </li>
                  <li>
                    <a href="portfolio-filters_sidebar.html">
                      <i class="zmdi zmdi-case"></i> Works</a>
                  </li>
                  <li>
                    <a href="page-timeline_left2.html">
                      <i class="zmdi zmdi-time"></i> Timeline</a>
                  </li>
                  <li>
                    <a href="page-pricing.html">
                      <i class="zmdi zmdi-money"></i> Pricing</a>
                  </li>
                  <li>
                    <a href="page-about.html">
                      <i class="zmdi zmdi-favorite-outline"></i> About Us</a>
                  </li>
                  <li>
                    <a href="page-team2.html">
                      <i class="zmdi zmdi-accounts"></i> Our Team</a>
                  </li>
                  <li>
                    <a href="page-services.html">
                      <i class="zmdi zmdi-face"></i> Services</a>
                  </li>
                  <li>
                    <a href="page-faq2.html">
                      <i class="zmdi zmdi-help"></i> FAQ</a>
                  </li>
                  <li>
                    <a href="page-login2.html">
                      <i class="zmdi zmdi-lock"></i> Login</a>
                  </li>
                  <li>
                    <a href="page-contact.html">
                      <i class="zmdi zmdi-email"></i> Contact</a>
                  </li>
                </ul>
              </div>
              <div class="ms-footbar-block">
                <h3 class="ms-footbar-title">Subscribe</h3>
                <p class="">Lorem ipsum Amet fugiat elit nisi anim mollit minim labore ut esse Duis ullamco ad dolor veniam velit.</p>
                <form>
                  <div class="form-group label-floating mt-2 mb-1">
                    <div class="input-group ms-input-subscribe">
                      <label class="control-label" for="ms-subscribe">
                        <i class="zmdi zmdi-email"></i> Email Adress</label>
                      <input type="email" id="ms-subscribe" class="form-control"> </div>
                  </div>
                  <button class="ms-subscribre-btn" type="button">Subscribe</button>
                </form>
              </div>
            </div>
            <div class="col-lg-5 col-md-7 ms-footer-col ms-footer-alt-color">
              <div class="ms-footbar-block">
                <h3 class="ms-footbar-title text-center mb-2">Last Articles</h3>
                <div class="ms-footer-media">
                  <div class="media">
                    <div class="media-left media-middle">
                      <a href="javascript:void(0)">
                        <img class="media-object media-object-circle" src="assets/img/demo/p75.jpg" alt="..."> </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">
                        <a href="javascript:void(0)">Lorem ipsum dolor sit expedita cumque amet consectetur adipisicing repellat</a>
                      </h4>
                      <div class="media-footer">
                        <span>
                          <i class="zmdi zmdi-time color-info-light"></i> August 18, 2016</span>
                        <span>
                          <i class="zmdi zmdi-folder-outline color-warning-light"></i>
                          <a href="javascript:void(0)">Design</a>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="media">
                    <div class="media-left media-middle">
                      <a href="javascript:void(0)">
                        <img class="media-object media-object-circle" src="assets/img/demo/p75.jpg" alt="..."> </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">
                        <a href="javascript:void(0)">Labore ut esse Duis consectetur expedita cumque ullamco ad dolor veniam velit</a>
                      </h4>
                      <div class="media-footer">
                        <span>
                          <i class="zmdi zmdi-time color-info-light"></i> August 18, 2016</span>
                        <span>
                          <i class="zmdi zmdi-folder-outline color-warning-light"></i>
                          <a href="javascript:void(0)">News</a>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="media">
                    <div class="media-left media-middle">
                      <a href="javascript:void(0)">
                        <img class="media-object media-object-circle" src="assets/img/demo/p75.jpg" alt="..."> </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">
                        <a href="javascript:void(0)">voluptates deserunt ducimus expedita cumque quaerat molestiae labore</a>
                      </h4>
                      <div class="media-footer">
                        <span>
                          <i class="zmdi zmdi-time color-info-light"></i> August 18, 2016</span>
                        <span>
                          <i class="zmdi zmdi-folder-outline color-warning-light"></i>
                          <a href="javascript:void(0)">Productivity</a>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-5 ms-footer-col ms-footer-text-right">
              <div class="ms-footbar-block">
                <div class="ms-footbar-title">
                  <span class="ms-logo ms-logo-white ms-logo-sm mr-1">M</span>
                  <h3 class="no-m ms-site-title">Material
                    <span>Style</span>
                  </h3>
                </div>
                <address class="no-mb">
                  <p>
                    <i class="color-danger-light zmdi zmdi-pin mr-1"></i> 795 Folsom Ave, Suite 600</p>
                  <p>
                    <i class="color-warning-light zmdi zmdi-map mr-1"></i> San Francisco, CA 94107</p>
                  <p>
                    <i class="color-info-light zmdi zmdi-email mr-1"></i>
                    <a href="mailto:joe@example.com">example@domain.com</a>
                  </p>
                  <p>
                    <i class="color-royal-light zmdi zmdi-phone mr-1"></i>+34 123 456 7890 </p>
                  <p>
                    <i class="color-success-light fa fa-fax mr-1"></i>+34 123 456 7890 </p>
                </address>
              </div>
              <div class="ms-footbar-block">
                <h3 class="ms-footbar-title">Social Media</h3>
                <div class="ms-footbar-social">
                  <a href="javascript:void(0)" class="btn-circle btn-facebook">
                    <i class="zmdi zmdi-facebook"></i>
                  </a>
                  <a href="javascript:void(0)" class="btn-circle btn-twitter">
                    <i class="zmdi zmdi-twitter"></i>
                  </a>
                  <a href="javascript:void(0)" class="btn-circle btn-youtube">
                    <i class="zmdi zmdi-youtube-play"></i>
                  </a>
                  <br>
                  <a href="javascript:void(0)" class="btn-circle btn-google">
                    <i class="zmdi zmdi-google"></i>
                  </a>
                  <a href="javascript:void(0)" class="btn-circle btn-instagram">
                    <i class="zmdi zmdi-instagram"></i>
                  </a>
                  <a href="javascript:void(0)" class="btn-circle btn-github">
                    <i class="zmdi zmdi-github"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </aside>
      <footer class="ms-footer">
        <div class="container">
          <p>Copyright &copy; Material Style 2017</p>
        </div>
      </footer>
      <div class="btn-back-top">
        <a href="#" data-scroll id="back-top" class="btn-circle btn-circle-primary btn-circle-sm btn-circle-raised ">
          <i class="zmdi zmdi-long-arrow-up"></i>
        </a>
      </div>
    </div>
    <!-- ms-site-container -->
    <div class="ms-slidebar sb-slidebar sb-left sb-style-overlay" id="ms-slidebar">
      <div class="sb-slidebar-container">
        <header class="ms-slidebar-header">
          <div class="ms-slidebar-login">
            <a href="javascript:void(0)" class="withripple">
              <i class="zmdi zmdi-account"></i> Login</a>
            <a href="javascript:void(0)" class="withripple">
              <i class="zmdi zmdi-account-add"></i> Register</a>
          </div>
          <div class="ms-slidebar-title">
            <form class="search-form">
              <input id="search-box-slidebar" type="text" class="search-input" placeholder="Search..." name="q" />
              <label for="search-box-slidebar">
                <i class="zmdi zmdi-search"></i>
              </label>
            </form>
            <div class="ms-slidebar-t">
              <span class="ms-logo ms-logo-sm">M</span>
              <h3>Material
                <span>Style</span>
              </h3>
            </div>
          </div>
        </header>
        <ul class="ms-slidebar-menu" id="slidebar-menu" role="tablist" aria-multiselectable="true">
          <li class="card" role="tab" id="sch1">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#slidebar-menu" href="#sc1" aria-expanded="false" aria-controls="sc1">
              <i class="zmdi zmdi-home"></i> Home </a>
            <ul id="sc1" class="card-collapse collapse" role="tabpanel" aria-labelledby="sch1">
              <li>
                <a href="index.html">Default Home</a>
              </li>
              <li>
                <a href="home-generic-2.html">Home Black Slider</a>
              </li>
              <li>
                <a href="home-landing.html">Home Landing Intro</a>
              </li>
              <li>
                <a href="home-landing3.html">Home Landing Video</a>
              </li>
              <li>
                <a href="home-shop.html">Home Shop 1</a>
              </li>
            </ul>
          </li>
          <li class="card" role="tab" id="sch2">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#slidebar-menu" href="#sc2" aria-expanded="false" aria-controls="sc2">
              <i class="zmdi zmdi-desktop-mac"></i> Pages </a>
            <ul id="sc2" class="card-collapse collapse" role="tabpanel" aria-labelledby="sch2">
              <li>
                <a href="page-about.html">About US</a>
              </li>
              <li>
                <a href="page-team.html">Our Team</a>
              </li>
              <li>
                <a href="page-product.html">Products</a>
              </li>
              <li>
                <a href="page-services.html">Services</a>
              </li>
              <li>
                <a href="page-faq.html">FAQ</a>
              </li>
              <li>
                <a href="page-timeline_left.html">Timeline</a>
              </li>
              <li>
                <a href="page-contact.html">Contact Option</a>
              </li>
              <li>
                <a href="page-login.html">Login</a>
              </li>
              <li>
                <a href="page-pricing.html">Pricing</a>
              </li>
              <li>
                <a href="page-coming.html">Coming Soon</a>
              </li>
            </ul>
          </li>
          <li class="card" role="tab" id="sch4">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#slidebar-menu" href="#sc4" aria-expanded="false" aria-controls="sc4">
              <i class="zmdi zmdi-edit"></i> Blog </a>
            <ul id="sc4" class="card-collapse collapse" role="tabpanel" aria-labelledby="sch4">
              <li>
                <a href="blog-sidebar.html">Blog Sidebar 1</a>
              </li>
              <li>
                <a href="blog-sidebar2.html">Blog Sidebar 2</a>
              </li>
              <li>
                <a href="blog-masonry.html">Blog Masonry 1</a>
              </li>
              <li>
                <a href="blog-masonry2.html">Blog Masonry 2</a>
              </li>
              <li>
                <a href="blog-full.html">Blog Full Page 1</a>
              </li>
              <li>
                <a href="blog-full2.html">Blog Full Page 2</a>
              </li>
              <li>
                <a href="blog-post.html">Blog Post 1</a>
              </li>
              <li>
                <a href="blog-post2.html">Blog Post 2</a>
              </li>
            </ul>
          </li>
          <li class="card" role="tab" id="sch5">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#slidebar-menu" href="#sc5" aria-expanded="false" aria-controls="sc5">
              <i class="zmdi zmdi-shopping-basket"></i> E-Commerce </a>
            <ul id="sc5" class="card-collapse collapse" role="tabpanel" aria-labelledby="sch5">
              <li>
                <a href="ecommerce-filters.html">E-Commerce Sidebar</a>
              </li>
              <li>
                <a href="ecommerce-filters-full.html">E-Commerce Sidebar Full</a>
              </li>
              <li>
                <a href="ecommerce-filters-full2.html">E-Commerce Topbar Full</a>
              </li>
              <li>
                <a href="ecommerce-item.html">E-Commerce Item</a>
              </li>
              <li>
                <a href="ecommerce-cart.html">E-Commerce Cart</a>
              </li>
            </ul>
          </li>
          <li class="card" role="tab" id="sch6">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#slidebar-menu" href="#sc6" aria-expanded="false" aria-controls="sc6">
              <i class="zmdi zmdi-collection-image-o"></i> Portfolio </a>
            <ul id="sc6" class="card-collapse collapse" role="tabpanel" aria-labelledby="sch6">
              <li>
                <a href="portfolio-filters_sidebar.html">Portfolio Sidebar Filters</a>
              </li>
              <li>
                <a href="portfolio-filters_topbar.html">Portfolio Topbar Filters</a>
              </li>
              <li>
                <a href="portfolio-filters_sidebar_fluid.html">Portfolio Sidebar Fluid</a>
              </li>
              <li>
                <a href="portfolio-filters_topbar_fluid.html">Portfolio Topbar Fluid</a>
              </li>
              <li>
                <a href="portfolio-cards.html">Porfolio Cards</a>
              </li>
              <li>
                <a href="portfolio-masonry.html">Porfolio Masonry</a>
              </li>
              <li>
                <a href="portfolio-item.html">Portfolio Item 1</a>
              </li>
              <li>
                <a href="portfolio-item2.html">Portfolio Item 2</a>
              </li>
            </ul>
          </li>
          <li>
            <a class="link" href="component-typography.html">
              <i class="zmdi zmdi-view-compact"></i> UI Elements</a>
          </li>
          <li>
            <a class="link" href="page-all.html">
              <i class="zmdi zmdi-link"></i> All Pages</a>
          </li>
        </ul>
        <div class="ms-slidebar-social ms-slidebar-block">
          <h4 class="ms-slidebar-block-title">Social Links</h4>
          <div class="ms-slidebar-social">
            <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-facebook">
              <i class="zmdi zmdi-facebook"></i>
              <span class="badge-pill badge-pill-pink">12</span>
              <div class="ripple-container"></div>
            </a>
            <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-twitter">
              <i class="zmdi zmdi-twitter"></i>
              <span class="badge-pill badge-pill-pink">4</span>
              <div class="ripple-container"></div>
            </a>
            <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-google">
              <i class="zmdi zmdi-google"></i>
              <div class="ripple-container"></div>
            </a>
            <a href="javascript:void(0)" class="btn-circle btn-circle-raised btn-instagram">
              <i class="zmdi zmdi-instagram"></i>
              <div class="ripple-container"></div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <script src="assets/js/plugins.min.js"></script>
    <script src="assets/js/app.min.js"></script>
    <script src="assets/js/configurator.min.js"></script>
    <script>
      (function(i, s, o, g, r, a, m)
      {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function()
        {
          (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
          m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
      })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
      ga('create', 'UA-90917746-2', 'auto');
      ga('send', 'pageview');
    </script>
  </body>
</html>